import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late int currentIndex;
  late BottomNavigationBar _bottomNavigationBar;
  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  final List pages = [
    Center(
      child: Text(
        'Home',
        style: TextStyle(fontSize: 40),
      ),
    ),
    Center(
      child: Text(
        'Message',
        style: TextStyle(fontSize: 40),
      ),
    ),
    Center(
      child: Text(
        'Cart',
        style: TextStyle(fontSize: 40),
      ),
    ),
    Center(
      child: Text(
        'Mine',
        style: TextStyle(fontSize: 40),
      ),
    ),
  ];

  void _changefunc(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom NavigationBar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
      items: [
        BottomNavigationBarItem( 
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.blue),
        BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: 'Message',
            backgroundColor: Colors.blue),
        BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'Cart',
            backgroundColor: Colors.blue),
        BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Mine',
            backgroundColor: Colors.blue),
      ],
      currentIndex: currentIndex,
      type: BottomNavigationBarType.fixed,
      onTap: (index) {
        _changefunc(index);
      },
    ),
      body: pages[currentIndex],
    );
  }
}
